<template>
    <div>
        <header class="header">
			<h1>todos</h1>
			<input 
                v-model="todoName" 
                @keyup.enter="addTodo" 
                class="new-todo" 
                placeholder="What needs to be done?" 
                autofocus>
		</header>
    </div>
</template>

<script>
/* eslint-disable */
import {mapMutations} from 'vuex'

export default {
    data() {
        return {
            todoName: ''
        }
    },
    methods: {
        //第二步: 映射
        ...mapMutations(['addTodo']),
        //改别名
        ...mapMutations({
            addtodo: 'addTodo'
        }),

        //添加任务
        addTodo() {
            // this.$store.commit('addTodo', {
            //     name: this.todoName
            // })

            this.addtodo({
                name: this.todoName
            })
            this.todoName = '';
        }
    }
}
</script>

<style>
    
</style>